<template>
		<div class="account">
        <div class="Asset Section">
          <div class="infomation">
            <div class="info-title">A</div>
            <div class="info-content">
              <h4>钱包信息</h4>
              <p>SSET INFORMATION</p>
            </div>
          </div>
          <div class="system">
            <span class="height_icon"> 
              <img class="system_icon" src="../../../assets/images/images/高度.png"/>
            </span>
            <span class="height">{{$t("message.account_height")+":"+Height}}</span>
            <!-- <span class="split">|</span>
            <span class="time_icon">
              <img class="system_icon" src="../../../assets/images/images/时间.png"/>
            </span>
            <span class="time">{{$t("message.account_height_time")+":"+timeShow}}</span> -->
          </div>
        </div>

        <div class="Address Section">
          <!-- <span class="Address_icon">
              <img class="system_icon" src="../../../assets/images/images/wallet.png"/>
          </span> -->
          <span class="add">
            <!-- <i class="dot"></i> -->
            {{$t("message.PersonMessage_Address")}}:{{user.address}}
          </span>
          <span class="btnSpan">
            <el-button size="mini"  @click="dialogVisibleQRPri = true">密钥二维码</el-button>
            <el-button size="mini"  @click="dialogVisibleQR = true">地址二维码</el-button>
          </span>
        </div>

        <el-row :gutter="20" class="Section">
          <!-- DDC链 -->
          <el-col :span="ddcTableWidth.span" :xs="24">
            <div class="Wallet">
              <!-- <p class="Wallet_Header">{{$t("message.account_card_asset")}}</p> -->
              <div class="Wallet_Header">
                <span class="ddc-line"></span>
                <span class="xas-line" @click="showAsset()" v-show="!AssetShow"></span>
              </div>

              <el-card>
								<el-table :data="BanlanceArray" class="myTable">
								 <el-table-column prop="currency" :label="$t('message.account_table_currency')">
										<template slot-scope="scope">
                      <span :class="{isXAS:scope.row.currency=='XAS',orther:scope.row.currency!='XAS'}">{{scope.row.currency}}</span>
                    </template>
								</el-table-column>
								<el-table-column prop="balance" :label="$t('message.account_table_balance')"></el-table-column>
								<el-table-column :label="$t('message.account_table_operation')">
                  <template slot-scope="scope">
                        <el-tooltip class="item" effect="dark" :content='$t("message.account_tooltip_withDraw")' placement="top-start">
                          <el-button disabled @click="handleClick(scope.row)"  type="text" size="mini">{{$t("message.account_table_t_oper_1")}}</el-button>
                        </el-tooltip>
                        <el-tooltip v-if="scope.row.currency!='XAS'" class="item" effect="dark" :content='$t("message.account_tooltip_trans")' placement="top-start">
                          <el-button @click="$router.push({name:'Trans',query:{currency:scope.row.currency}})" type="text" size="mini">{{$t("message.account_table_t_oper_2")}}</el-button>
                        </el-tooltip>
                  </template>
								</el-table-column>
								</el-table>
              </el-card>
            </div>
          </el-col>
          <!-- 阿希链 -->
          <el-col :span="ddcTableWidth.xasspan" :xs="24">
            <div class="Wallet" v-show="AssetShow">
              <div class="Wallet_Header">
                <!-- <el-button class="HideAssetBtn"  type="text" @click="showAsset()">{{AssetShow?'隐藏':'显示'}}</el-button> -->
                <!-- <el-button class="HideAssetBtn" plain @click="showAsset()" v-show="AssetShow">点击隐藏
                  <i class="el-icon-d-arrow-right animation"></i>
                </el-button>
                <span class="padding" v-show="!AssetShow"></span> -->
                <span class="xas-show"></span>
                <span class="xas-hide" @click="showAsset()"></span>
              </div>

              <el-card class="transition-box">

                <!-- <div class="main-line" v-show="!AssetShow" @click="showAsset()">
                  <span><i class="el-icon-d-arrow-left"></i>阿希链</span>
                </div> -->

                <!-- <transition-group name="el-fade-in" mode="out-in"> -->
                  <!-- <el-button key="button" class="ShowAssetBtn" v-if="!AssetShow" type="text" @click="showAsset()">点击展开</el-button> -->
                <el-table key="table"  :data="AssetArray" class="myTable">
								  <el-table-column prop="currency" :label="$t('message.account_table_currency')">
                    <template slot-scope="scope">
                     <span :class="{isXAS:scope.row.currency=='XAS',orther:scope.row.currency!='XAS'}">{{scope.row.currency}}</span>
                    </template>
								  </el-table-column>
								  <el-table-column prop="balance" :label="$t('message.account_table_balance')">
								  </el-table-column>
								  <el-table-column :label="$t('message.account_table_operation')">
										<template slot-scope="scope">
											<el-tooltip class="item" effect="dark" :content='$t("message.account_tooltip_Recharge")' placement="top-start">
												<el-button @click="showDeposeDialog(scope.row.currency)" type="text" size="mini">{{$t("message.account_table_t_oper_3")}}</el-button>
                      </el-tooltip>
                      <el-tooltip class="item" effect="dark"  content='阿希链转账' placement="top-start">
												<el-button  @click="$router.push({name:'uiaTrans',query:{cy:scope.row.currency}})" type="text" size="mini">转账</el-button>
                      </el-tooltip>
										</template>
								  </el-table-column>

								</el-table>
                <!-- </transition-group> -->
              </el-card>
            </div>
          </el-col>
        </el-row>
        <div class="Trans Section">
          <div class="infomation">
            <div class="info-title">T</div>
            <div class="info-content">
              <h4>交易信息</h4>
              <p>RANSACTION INFORMATION</p>
            </div>
          </div>
          <!-- <div class="header"> 
            <h4>交易信息</h4>
            <p>TRANSACTION INFORMATION</p>
          </div> -->
          <el-card class="box-card">
					  <el-table :data="TransationArray" class="myTable" 	v-loading="loading">
              	<el-table-column prop="type" :label="$t('message.account_table_t_type')"></el-table-column>
								<el-table-column prop="senderId" :label="$t('message.account_table_senderId')" min-width="180">
                    <template slot-scope="scope">
                     <!-- <span :class="{isXAS:scope.row.currency=='XAS',orther:scope.row.currency!='XAS'}">{{scope.row.currency}}</span> -->
                     <span  v-if="scope.row.senderId==user.address">{{scope.row.senderId}}(我)</span>
                     <span  v-else>{{scope.row.senderId}}</span>
                    </template>
								</el-table-column>
                <el-table-column prop="recipientId" :label="$t('message.account_table_recipientId')" min-width="180">
                    <template slot-scope="scope">
                     <!-- <span :class="{isXAS:scope.row.currency=='XAS',orther:scope.row.currency!='XAS'}">{{scope.row.currency}}</span> -->
                     <span  v-if="scope.row.recipientId==user.address">{{scope.row.recipientId}}(我)</span>
                     <span  v-else>{{scope.row.recipientId}}</span>
                    </template>
								</el-table-column>
      					<el-table-column prop="amounts" :label="$t('message.account_table_amounts')">
                    <template slot-scope="scope">
                     <!-- <span :class="{isXAS:scope.row.currency=='XAS',orther:scope.row.currency!='XAS'}">{{scope.row.currency}}</span> -->
                     <span class="sender_trans" v-if="scope.row.senderId!=scope.row.recipientId&&scope.row.senderId==user.address">-{{scope.row.amounts}}</span>
                     <span class="recipientId_trans" v-else-if="scope.row.senderId!=scope.row.recipientId&&scope.row.recipientId==user.address">+{{scope.row.amounts}}</span>
                     <span class="owner_trans" v-else>{{scope.row.amounts}}</span>
                    </template>
								</el-table-column>
								<el-table-column prop="time" :label="$t('message.account_table_time')">
								</el-table-column>
						</el-table>


						<!-- <el-pagination
              class="myPage"
              @current-change="handleCurrentChange"
              :current-page="pageIndex"
              :page-size="10"
              layout="total, prev, pager, next, jumper"
              :total="TransationTotalCount">
              <template>
                <div class="go-page">
                  <span>跳转</span>
                  <input type="text" v-model="goPage" @keydown.enter="go_page">
                  <button @click="go_page">GO</button>
                </div>
              </template>
				    </el-pagination> -->
            <el-pagination class="myPage" @current-change="handleCurrentChange" :current-page.sync="pageIndex" :page-size="10" :pager-count="5"
              layout="prev, pager, next, slot" :total="TransationTotalCount" background>
              <template>
                <div class="go-page">
                  <span>跳转</span>
                  <input type="text" v-model="goPage" @keydown.enter="go_page">
                  <button @click="go_page">GO</button>
                </div>
              </template>
            </el-pagination>




				</el-card> 
      </div>

			<div class="accounts">

				<el-dialog :title="$t('message.acount_form_title')" :visible.sync="dialogFormVisible">
						<el-form @submit.native="btn_ok()" :model="form" ref="form" label-position="top" :rules="rules2">
						<el-form-item :label="$t('message.acount_form_title1')"  prop="amount">
								<el-input v-model="form.amount" type="number" auto-complete="off"></el-input>
						</el-form-item>
						<el-form-item :label="$t('message.acount_form_title2')"  prop="currency">
								<el-select v-model="form.currency" :placeholder="$t('message.acount_form_title2')">
                  <el-option label="DDC" :value="Config.cy"></el-option>
									<el-option label="XAS" value="XAS"></el-option>
								</el-select>
						</el-form-item>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button @click="dialog_no()">{{$t("message.acount_form_btn_no")}}</el-button>
						<el-button v-if="btn_disable" disabled>{{btn_timer}} {{$t("message.acount_form_btn_disable_1")}}</el-button>
						<el-button v-else type="primary" @click="btn_ok()" :loading="btn_loading">{{$t("message.acount_form_btn_ok")}}</el-button>
					</div>
			</el-dialog>

			<el-dialog :title="$t('message.account_dialog_depose_title')" :visible.sync="DepositeVisible">
						<el-form @submit.native="btn_ok_deposite()" :model="DepositeForm" ref="Deposform" label-position="top" :rules="DepositeRules">
						<el-form-item :label="$t('message.acount_form_title4')"  prop="amount">
								<el-input v-model="DepositeForm.amount" type="number" auto-complete="off"></el-input>
						</el-form-item>
						<el-form-item :label="$t('message.account_dialog_depose_lable_second')"  prop="secondSecret" v-if="$store.state.user&&$store.state.user.secondPublicKey">
								<el-input v-model="DepositeForm.secondSecret" type="password"  auto-complete="off" :placeholder="$t('message.error_pass')"></el-input>
						</el-form-item>
						<el-form-item :label="$t('message.acount_form_title2')"  prop="currency">
								<el-select v-model="DepositeForm.currency" :placeholder="$t('message.acount_form_title2')">
									<el-option v-for="(item,index) in DepositeOption" :key="index" :label="item" :value="item"></el-option>
								</el-select>
						</el-form-item>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button @click="DepositeVisible=false">{{$t("message.acount_form_btn_no")}}</el-button>
						<el-button v-if="Depose_btn_disable" disabled>{{Depose_timer}} {{$t("message.acount_form_btn_disable_1")}}</el-button>
						<el-button v-else type="primary" @click="btn_ok_deposite()" :loading="Depose_btn_loading">{{$t("message.acount_form_btn_ok")}}</el-button>
					</div>
			</el-dialog>

      <el-dialog :visible.sync="dialogVisibleQR">
          <div class="myQrBody">
            <vue-qr :text="user.address"  class="myQr" 
                    :logoSrc="logoSrc" 
                    :margin="0" 
                    :size="170" 
                    :dotScale="0.8" 
                    colorDark="#333">
            </vue-qr>
            <p style="text-align:center"> 钱包地址</p>
          </div>
          
      </el-dialog>
            <el-dialog :visible.sync="dialogVisibleQRPri">
          <div class="myQrBody">
            <vue-qr :text="user.secret"  class="myQr" 
                    :logoSrc="logoSrc"  
                    :margin="0" 
                    :size="170" 
                    :dotScale="0.8" 
                    colorDark="#333">
            </vue-qr>
            <p class="tips"> 密钥为登录在线钱包唯一凭证，请妥善保管，丢失不能找回，切勿分享</p>
          </div>
          
      </el-dialog>
				</div>
		</div>
</template>
<script>
import Config from "../../../config/server";
import AschJs from "asch-js";
import VueQr from "vue-qr";
export default {
  components: {
    VueQr
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      var user = vm.$store.state.user;
      if (!user) {
        console.log("vm", vm);
        vm.$router.replace("/");
      }
    });
  },
  data() {
    var checknumber = (rule, value, callback) => {
      var amount = parseFloat(value);

      var er = this.$t("message.acount_form_error_asset_get_0");
      if (amount > 0) {
        if (amount <= 0) {
          callback(new Error(er));
        }
        var balance = this.IsHanBanlances;
        console.log(balance);
        if (!balance.success) {
          callback(new Error(balance.error));
        } else {
          callback();
        }
      } else {
        callback(new Error(er));
      }
    };
    var checkbanlance = (rule, value, callback) => {
      var amount = parseFloat(this.form.amount);

      var er = this.$t("message.acount_form_error_asset_get_0");
      if (amount >= 0) {
        if (amount <= 0) {
          callback(new Error(er));
        }
        var balance = this.IsHanBanlances;
        console.log(balance);

        if (!balance.success) {
          callback(new Error(balance.error));
        } else {
          callback();
        }
      } else {
        callback(new Error(er));
      }
    };
    var checknumber2 = (rule, value, callback) => {
      var reg = /^\/\/d+(\/\/.\/\/d+)?$/;
      if (parseFloat(value) >= 0) {
        if (parseFloat(value) <= 0) {
          callback(new Error(this.$t("message.acount_form_error_asset_get_0")));
        } else {
          value = Number(value);
          var currency = this.DepositeForm.currency;
          if (currency == "XAS") {
            if (value <= parseFloat(this.Asset.XAS - 0.1).toFixed(8)) {
              callback();
            } else {
              callback(
                "XAS " + this.$t("message.account_form_error_WithDrawl_1")
              );
            }
          } else {
            var balance = this.Asset.DDC;
            if (value <= balance) {
              if (this.Asset.XAS >= 0.1) {
                callback();
              } else {
                callback(
                  new Error(
                    "XAS " + this.$t("message.account_form_error_WithDrawl_2")
                  )
                );
              }
            } else {
              callback(
                new Error(
                  Config.cy + this.$t("message.account_form_error_WithDrawl_1")
                )
              );
            }
          }
          callback();
        }
      } else {
        callback(new Error(this.$t("message.acount_form_error_asset_get_0")));
      }
    };
    var checkbanlance2 = (rule, value, callback) => {
      var user = this.$store.state.user;
      if (user) {
        if (user.secondPublicKey) {
          //如果存在
          var reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/;
          if (reg.test(value)) {
            callback();
          } else {
            callback(new Error(this.$t("message.error_pass")));
          }
        } else {
          callback();
        }
      } else {
        callback(new Error("用户不存在"));
      }
    };
    return {
      btn_disable: false,
      btn_timer: 15,
      btn_time: null,
      user: {
        address: "",
        publicKey: ""
      },
      Config: Config,
      BanlanceArray: [],
      BanlanceObj: {},
      TransationArray: [],
      transactionArray: [],
      TransationTotalCount: 0,
      Types: [],
      timer: null,
      pageIndex: 1,
      loading: false,
      dialogFormVisible: false,
      btn_loading: false,
      form: {
        amount: 0,
        currency: ""
      },
      rules2: {
        amount: [{ validator: checknumber, trigger: "blur" }],
        currency: [{ validator: checkbanlance, trigger: "change" }]
      },
      DepositeVisible: false, //充值
      DepositeForm: {
        secondSecret: "",
        amount: 0,
        currency: ""
      },
      DepositeOption: ["XAS", "DDC"],
      DepositeRules: {
        amount: [{ validator: checknumber2, trigger: "blur" }],
        secondSecret: [{ validator: checkbanlance2, trigger: "blur" }]
      },
      Depose_btn_loading: false,
      Depose_btn_disable: false,
      Depose_timer: 15,
      Depose_time: 0,
      Asset: { DDC: 0,XAS: 0  },
      AssetArray: [],
      AssetShow: false,
      Height: 0,
      timeShow: "0000/00/00 00:00:00",

      dialogVisibleQR: false,
      dialogVisibleQRPri: false,
      logoSrc:require("../../../assets/qrcode.png"),


      goPage:""
    };
  },
  mounted() {
    this.getbalances();
    this.gethHeight();
    this.getTransation(10, 0);
    this.getAsset();
    this.timer = setInterval(() => {
      this.getbalances();
      this.gethHeight();
      this.getTransation(10, (this.pageIndex - 1) * 10);
      this.getAsset();
    }, 20000);
    if (this.$store.state.user) {
      this.user = this.$store.state.user;
    }
  },
  destroyed() {
    clearInterval(this.timer);
    clearInterval(this.btn_time);
  },
  computed: {
    IsHanBanlances() {
      var amount = parseFloat(this.form.amount);
      var currency = this.form.currency;
      if (currency == "XAS") {
        var balance = this.BanlanceObj.XAS;
        if (amount <= parseFloat((balance - 0.1).toFixed(8))) {
          //金额小于余额 -0.1
          return { success: true };
        } else {
          var error = this.$t("message.account_form_error_WithDrawl_1");
          return { success: false, error: "XAS " + error };
        }
      } else {
        var xasBalance = this.BanlanceObj.XAS;
        var ddcBalance = this.BanlanceObj.DDC;
        if (xasBalance < 0.1) {
          var error = this.$t("message.account_form_error_WithDrawl_2");
          return { success: false, error: "XAS " + error };
        }
        if (amount > ddcBalance) {
          var error = this.$t("message.account_form_error_WithDrawl_1");
          return { success: false, error: "DDC " + error };
        }
        return { success: true };
      }
    },
    ddcTableWidth() {
      if (this.AssetShow) {
        //展开状态
        return { span: 12, xasspan: 12 };
      } else {
        return { span: 24, xasspan: 0 };
      }
    }
  },
  methods: {
    showAsset() {
      this.AssetShow = !this.AssetShow;
    },
    begin_timer() {
      this.btn_disable = true;
      this.btn_timer = 15;
      this.btn_time = setInterval(() => {
        if (this.btn_timer <= 0) {
          clearInterval(this.btn_time);
          this.btn_disable = false;
        }
        this.btn_timer--;
      }, 1000);
    },
    Depose_begin_timer() {
      this.Depose_btn_disable = true;
      this.Depose_timer = 15;
      this.Depose_time = setInterval(() => {
        if (this.Depose_timer <= 0) {
          clearInterval(this.Depose_time);
          this.Depose_btn_disable = false;
        }
        this.Depose_timer--;
      }, 1000);
    },
    showDeposeDialog(currency) {
      if (this.$refs["Deposform"]) {
        this.$refs["Deposform"].resetFields();
      }
      this.DepositeVisible = true;
      this.DepositeForm.currency = currency;
      if (currency == "XAS") {
        var amount =
          this.Asset.XAS - 0.1 > 0 ? this.Asset.XAS - 0.1 : this.Asset.XAS;
        this.DepositeForm.amount = parseFloat(amount.toFixed(8));
      } else {
        this.DepositeForm.amount = this.Asset.DDC;
      }
    },
    getbalances() {
      var user = this.$store.state.user;
      if (!user) {
        return false;
      }
      if (!user.hasOwnProperty("address")) {
        return false;
      }
      var address = user.address;
      this.$http
        .get(Config.balances + address)
        .then(data => data.data)
        .then(data => {
          // console.log("data", data);
          if (data.success) {
            // var asset=[{currency:"XAS",balance:0},{currency:Config.cy}];
            var asset = { DDC: 0 ,XAS: 0 };
            data.balances.map(item => {
              if (item.currency == "XAS") {
                asset.XAS = Number(item.balance / 1e8);
                this.$store.dispatch("setXASBalance", asset.XAS);
              } else if (item.currency == Config.cy) {
                asset.DDC = Number(item.balance / 1e8);
                this.$store.dispatch("setBalance", asset.DDC);
              }
              //item.balance = Number(item.balance / 1e8);
              //return item;
            });
            var tmp = [];
            for (var it in asset) {
              tmp.push({ currency: it, balance: asset[it] });
            }
            this.BanlanceArray = tmp;
            this.BanlanceObj = asset;
            // console.log("BanlanceArray", this.BanlanceArray);
          } else {
            console.error(data.error);
          }
        })
        .catch(error => {
          console.error(error.message);
        });
    },
    getTransation(limit = 10, offset = 0) {
      this.loading = true;
      var user = this.$store.state.user;
      if (!user) {
        return false;
      }
      if (!user.hasOwnProperty("address")) {
        return false;
      }

      var address = this.$store.state.user.address;
      this.$http
        .get(Config.transfers, {
          params: {
            ownerId: address,
            limit: limit,
            offset: offset
          }
        })
        .then(data => data.data)
        .then(data => {
          this.loading = false;
          // console.log("data", data);
          if (data.success) {
            this.TransationArray = data.transfers
              .sort(function(a, b) {
                return b.timestamp - a.timestamp;
              })
              .map((item, index) => {
                var currency =item.currency == Config.cy ? "DDC" : item.currency;
                item.amounts = item.amount / 1e8 + " " + currency;
                // if (item.senderId == address) {
                //   item.senderId =
                //     item.senderId + "(" + this.$t("message.account_mine") + ")";
                // }
                // if (item.recipientId == address) {
                //   item.recipientId =
                //     item.recipientId +
                //     "(" +
                //     this.$t("message.account_mine") +
                //     ")";
                // }
                if (item.type == 3 || item.type == 2005 ) {
                  item.type = this.$t("message.account_table_type_3");
                }else if( item.type == 2301){
                  item.type = '应用转账';
                }
                item.time = this.fullTimestamp(item.timestamp);
                return item;
              });
            this.TransationTotalCount = data.count;
          } else {
            console.error(data.error);
          }
        })
        .catch(error => {
          this.loading = false;
          console.error(error.message);
        });
    },
    getTypes() {
      this.$http
        .get(Config.contracts, {})
        .then(data => data.data)
        .then(data => {
          // console.log("data", data);
          if (data.success) {
            this.Types = data.contracts;
          } else {
            console.error(data.error);
          }
        })
        .catch(error => {
          console.error(error.message);
        });
    },
    setTransactionArray() {
      this.getTransation(10, 10 * (this.pageIndex - 1));
    },
    handleCurrentChange(val) {
      this.pageIndex = val;
      this.setTransactionArray();
    },
    go_page(){
      var page = parseInt(this.goPage)
			if(!isNaN(page) && page>0){
				this.pageIndex = page
				this.setTransactionArray()
      }
    },
    getEpochTime(time) {
      if (time === undefined) {
        time = new Date().getTime();
      }
      var d = this.beginEpochTime();
      var t = d.getTime();
      return Math.floor((time - t) / 1000);
    },
    beginEpochTime() {
      var d = new Date(Date.UTC(2016, 5, 27, 20, 0, 0, 0));
      return d;
    },
    fullTimestamp(time) {
      var d = this.beginEpochTime();
      var t = parseInt(d.getTime() / 1000);
      d = new Date((time + t) * 1000);
      var month = d.getMonth() + 1;
      if (month < 10) {
        month = "0" + month;
      }
      var day = d.getDate();
      if (day < 10) {
        day = "0" + day;
      }
      var h = d.getHours();
      var m = d.getMinutes();
      var s = d.getSeconds();
      if (h < 10) {
        h = "0" + h;
      }
      if (m < 10) {
        m = "0" + m;
      }
      if (s < 10) {
        s = "0" + s;
      }
      return (
        d.getFullYear() + "/" + month + "/" + day + " " + h + ":" + m + ":" + s
      );
    },
    handleClick(row) {
      return;
      //提现点击事件
      if (this.$refs["form"]) {
        this.$refs["form"].resetFields();
      }
      var amount = row.balance;
      if (row.currency == "XAS") {
        amount = parseFloat(amount - 0.1);
      }
      this.form.amount = amount > 0 ? parseFloat(amount.toFixed(8)) : 0;
      this.form.currency = row.currency;
      this.dialogFormVisible = true;
    },
    dialog_no() {
      //提现按钮点击取消事件
      this.dialogFormVisible = false;
      this.$refs["form"].resetFields();
    },
    btn_ok() {
      //提现点击确认事件
      if (this.btn_disable) {
        return false;
      }
      var currency =
        this.form.currency == "DDC" ? Config.cy : this.form.currency;
      this.$refs["form"].validate(validat => {
        if (validat) {
          this.TiXian(this.form.amount, currency);
        }
      });
    },
    btn_ok_deposite() {
      if (this.Depose_btn_disable) {
        return false;
      }
      this.$refs["Deposform"].validate(validat => {
        if (validat) {
          this.Deposite();
        }
      });
    },
    TiXian(number, currency) {
      if (number <= 0) {
        this.$message.error(this.$t("message.error_amount_gt0"));
        return false;
      }

      var secret = this.$store.state.user.secret;
      var fee = String(0.1 * 100000000);
      // var fee=String(0);
      var type = 2;
      //var currency=Config.cy;
      var amount = (number * 1e8).toFixed(0);
      if (amount.indexOf(".") >= 0) {
        amount = amount.split(".")[0];
      }
      var args = '["' + currency + '","' + amount + '"]';
      var options = { fee: fee, type: type, args: args };
      var transaction = AschJs.dapp.createInnerTransaction(options, secret);
      this.btn_loading = true;
      this.$http
        .put(
          Config.tixian,
          {
            transaction: transaction
          },
          {
            headers: {
              magic: Config.magic,
              version: ""
            }
          }
        )
        .then(data => data.data)
        .then(data => {
          this.btn_loading = false;
          if (data.success) {
            this.$message.success(
              this.$t("message.success_tixian") +
                "[" +
                number +
                " " +
                currency +
                "]"
            );
            this.dialogFormVisible = false;
            this.begin_timer();
          } else {
            this.$message.error(data.error);
          }
        })
        .catch(error => {
          this.btn_loading = false;
          this.$message.error(error.message);
        });
    },
    Deposite() {
      var dappid = Config.dappid;
      var currency =
          this.DepositeForm.currency == "DDC"
            ? Config.cy
            : this.DepositeForm.currency,
        amount = parseFloat(this.DepositeForm.amount) * 1e8,
        secret = this.$store.state.user.secret,
        secondSecret = undefined;
      if (this.$store.state.user && this.$store.state.user.secondPublicKey) {
        secondSecret = this.DepositeForm.secondSecret;
      }
      // var transaction = AschJs.transfer.createInTransfer(
      //   dappid,
      //   currency,
      //   amount,
      //   secret,
      //   secondSecret
      // );
      var transaction = AschJs.transaction.createTransactionEx(
        {
          type: 204,
          fee: 10000000,
          args: ['dreamworld', currency, amount+''],
          secret,
          secondSecret: secondSecret
        }

      );
      this.Depose_btn_loading = true;
      this.$http
        .post(
          Config.aschTrans,
          {
            transaction: transaction
          },
          {
            headers: {
              magic: Config.magic,
              version: ""
            },
            timeout: 10000
          }
        )
        .then(data => data.data)
        .then(data => {
          this.Depose_btn_loading = false;
          if (data.success) {
            this.$message.success("充值成功");
            this.DepositeVisible = false;
            this.Depose_begin_timer();
            this.DepositeForm.amount = 0;
            this.DepositeForm.secondSecret = "";
          } else {
            this.$message.error(data.error);
          }
        })
        .catch(error => {
          this.Depose_btn_loading = false;
          this.$message.error(error.message);
        });
    },
    getAsset() {
      var user = this.$store.state.user;
      if (!user) {
        return false;
      }
      if (!user.hasOwnProperty("address")) {
        return false;
      }
      var address = user.address;
      this.$http
        .all([
          this.$http.get(Config.asset + address + "/" + Config.cy),
          this.$http.get(Config.xas, {
            params: {
              address: address
            }
          })
        ])
        .then(
          this.$http.spread((ddc, xas) => {
            ddc = ddc.data;
            xas = xas.data;
            if (xas.success) {
              this.Asset.XAS = parseFloat((xas.balance / 1e8).toFixed(8));
              //this.AssetArray.push({currency:"XAS",balance:this.Asset.XAS})
            }
            if (ddc.success) {
              if(ddc.balance){  //主链有ddc余额
                this.Asset.DDC = parseFloat((parseFloat(ddc.balance.balance)/ 1e8).toFixed(8));
              }
              //this.AssetArray.push({currency:Config.cy,balance:this.Asset.DDC})
              if(ddc.data && typeof ddc.data == 'string'){  
                this.Asset.DDC = 0
              }
            }

            var arry = [];
            for (var item in this.Asset) {
              arry.push({
                currency: item,
                balance: this.Asset[item]
              });
            }
            this.AssetArray = arry;
          })
        )
        .catch(error => {
          console.error(error.message);
        });
    },
    gethHeight() {
      this.$http
        .get(Config.height, { timeout: 10000 })
        .then(data => data.data)
        .then(data => {
          if (data.success) {
            this.Height = data.height;
          } else {
            console.error(data.error);
          }
        })
        .catch(error => {
          console.error(error);
        });
    }
  }
};
</script>
<style>
.el-card {
  margin-top: 10px;
  width: 100%;
  float: left;
}
.Asset {
  width: 100%;
  height: 60px;
  margin-top: 25px;
  margin-bottom: 15px;
  position: relative;
  overflow: hidden;
}
.infomation {
  color: #666666;
  float: left;margin-top: 0;
  width: 250px;
  height: 60px;
}
.infomation::after{
  content: '';width: 0;height: 0;
  display: table;clear: both;
}
.infomation::before{
  content: '';width: 0;height: 0;
  display: table;clear: both;
}

.infomation .info-title{
  float: left;font-size: 74px;color: #74cde8;line-height: 1em;
}
.infomation .info-content{
  float: right;margin-top: 0;
  height: 60px;}
.infomation h4 {font-size: 30px;}
.infomation p {font-size: 20px;margin-top: 2px;}
.system {
  float: right;
  color: #9b9b9b;
  font-size: 20px;
  padding: 10px 0px;
}
.Asset .system .system_icon {
  position: relative;
  top: 6px;
}
.Asset .system .split {
  margin: 0 10px;
}

/* 地址 */
.Address {
  height: 80px;
  border-radius: 5px;
  background: url('../../../assets/img/address-bg.png') repeat-x;
  color: #fff;
  font-size: 28px;
  line-height: 80px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
  white-space: nowrap;
  -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.Address > span {
  float: left;
  letter-spacing: 2px;
  white-space: nowrap;
}
.add{margin-left: 100px;}
.btnSpan {
  width: 250px;
  height: 80px;
}
.btnSpan > button {
  float: left;
  margin-top: 25px;
  margin-left: 20px !important;
}


.Wallet {
  margin-top: 10px;
  margin-bottom: 10px;
}
.Wallet_Header {
  height: 40px;
  line-height: 40px;
  position: relative;
  color: #949bc7;
  width: 290px;;
}
.ddc-line,.xas-line{
  position: absolute;
  height: 100%;
}
.ddc-line{
  left: 0;top: 0;
  width: 180px;
  background: url('../../../assets/img/ddc-tip.png') no-repeat;
}
.xas-line{
  right: 0;top: 0;
  cursor: pointer;
  width: 140px;
  background: url('../../../assets/img/asch-btn.png') no-repeat;
}
.xas-line:hover{
  background: url('../../../assets/img/asch-btn-hover.png') no-repeat;
}

.xas-show,.xas-hide{
  position: absolute;
  height: 100%;
}
.xas-show{
  left: 0;top: 0;
  width: 180px;
  background: url('../../../assets/img/asch-tip.png') no-repeat;
}
.xas-hide{
  right: 0;top: 0;
  cursor: pointer;
  width: 140px;
  background: url('../../../assets/img/asch-hide.png') no-repeat;
}
.xas-hide:hover{
  background: url('../../../assets/img/asch-hide-hover.png') no-repeat;
}


.Wallet .el-button {
  font-size: 22px;
  color: #1ab8e8;
}
.Wallet .isXAS{
  color:#f9a527
}
.Wallet .orther{
  color:#1ab8e8;
}
.Wallet_Header button {
    padding: 4px 5px;
}

.myTable .cell {
  font-size: 22px;
  color: #3a4062;
}
.Section .el-card__body {
  padding: 10px 0 0 0;
}
.Section .el-card{
  position: relative;
}
.myTable .el-table__header-wrapper .cell {
  font-size: 24px;
  /* color: #3a4062; */
  color: #656565;
}
.Trans .cell {
  font-size: 14px;
}
.Trans .header {
  margin-top: 10px;
}
.Trans .header h4 {
  font-size: 30px;
  color: #949bc7;
}
.Trans .header p {
  font-size: 16px;
  color: #949bc7;
}
.Trans .el-table__header-wrapper {
  border-bottom: 2px solid #1ab8e8;
}
.Trans {
  margin-bottom: 40px;

}
.Trans::after{
  content: '';
  display: table;
  clear: both;
}
.Trans .infomation{
  width: 330px;
  /* height: 80px; */
  margin: 25px 0 5px 0;
}
.Trans .sender_trans{
  color: #f34551
}
.Trans .recipientId_trans{
  color: #22ca80;
}
.myPage {
  padding: 10px !important;
  text-align: center;
}
.myPage button,
.myPage span:not([class*="suffix"]) {
  font-size: 18px !important;
  columns: #3a4062;
}
.myPage .el-pager li {
  font-size: 18px !important;
}
.el-pagination .btn-next .el-icon,
.el-pagination .btn-prev .el-icon{
  font-size: 20px !important;
}
/* .el-pagination .btn-next .el-icon, 
.el-pagination .btn-prev .el-icon */
.myPage .el-pager li.active,
.myPage .el-pager li:hover {
  color: #1ab8e8;
}

.go-page{display: inline-block;color: #656565;height: 30px;width: 160px;margin-left: 20px;}
.go-page span{float: left;font-weight: normal;}
.go-page input{width: 60px;height: 25px;float: left;border-radius: 5px;border: 1px solid #1ab8e8;outline: none;background: transparent;
color: #656565;text-align: center;margin-top: 0px;margin-left: 8px;}
.go-page button{border-radius: 5px;float: right;margin-left: 10px;cursor: pointer;
border:1px solid #1ab8e8 !important;color: #1ab8e8;position: relative;top: -1px;}
.go-page button:hover{
  color: #1ab8e8;
}
.Trans .el-pagination.is-background .el-pager li:not(.disabled).active{
  background-color: #1ab8e8;
}
.Trans .el-pagination.is-background .el-pager li:not(.disabled):not(.active):hover{
  color: #1ab8e8;
}

.dot {
  display: inline-block;
  height: 10px;
  width: 10px;
  border-radius: 5px;
  background: #fff;
}
.dot_style_XAS {
  background: #22ca80;
  position: relative;
  top: -3px;
}
.dot_style_DDC {
  background: #f34551;
  position: relative;
  top: -3px;
}
.transition-box {
  min-height: 183px;
  /* line-height: 150px; */
  /* text-align: center; */
}
.ShowAssetBtn {
  margin-top: 44px;
  margin-left: calc(50% - 44px);
}
.HideAssetBtn {
  /* padding: 0px !important; */
  font-size: 16px !important;
  color: #536ff1 !important;
}
.HideAssetBtn:hover{
  border-color: #536ff1 !important;
}
.el-dialog__headerbtn {
  font-size: 36px !important;
}

.accounts .el-dialog{
  margin-top: 0 !important;
  width: 60%;
  position: absolute;
  top: 50%;
  left: 50%; 
  transform: translate(-50%,-50%);
  /* margin-left: -362px;
  margin-top: -310px !important; */
}
.myQr {
  position: relative;
  text-align: center;
  width: 500px;height: 460px;
  margin: 0 auto;
  margin-bottom: 20px;
  background: url('../../../assets/img/qrcode-mima.png') no-repeat center center;
}
.myQr img{
  position:absolute;
  top: 155px;
  left: 169px;
}
.myQrBody p{
  text-align:center;font-size: 16px;
}
.myQrBody p.tips{
  color: red;
}


.main-line{
  position: absolute;
  width: 78px;
  height: 183px;
  top: 0px;
  right: 0px;
  z-index: 99;
  font-size: 20px;
  cursor: pointer;
  box-sizing: border-box;
  border-top: 10px solid #f9a527;
}
.main-line span{
  display: inline-block;
  width: 20px;
  height: 100px;
  line-height: 24px;
  margin-left: 30px;
  margin-top: 20px;
}
@keyframes toshow {
  0%{transform: translateX(0px)}
  50%{transform: translateX(-5px)}
  100%{transform: translateX(0px)}
}
.main-line i{
  float: left;
  /* margin-top: 76px;
  margin-left: 10px; */
  margin-top: 0px;
  margin-left: 0px;
  margin-bottom: 10px;
  animation: toshow 1s ease-in-out infinite;
  font-size: 24px;
}
i.animation{
  animation: toshow 1s ease-in-out infinite;
  /* font-size: 24px; */
  margin-left: 5px;
  position: relative;
  top: 1px;
}


@media screen and (min-width: 768px) and (max-width: 1200px){
  .accounts .el-dialog{
    width: 80%;
  }
}


@media screen and (max-width: 768px) {
  .accounts .el-dialog{
    width: 99%;
  }
  .Address .add {
    font-size: 12px;
  }
  .Address > span{
    float:none;
  }
  .Address > span.add {
    height: 50px;
    line-height: 50px;
    display: block;
  }
  .Address_icon {
    display: none;
  }
  .Asset .infomation {
    display: block;
    width: 100%;
  }
  .Asset .system {
    display: block;
    width: 100%;
    float: none;
  }
  .transition-box {
    min-height: 50px;
    /* text-align: center; */
    /* line-height: 150px; */
    /* text-align: center; */
  }
  .ShowAssetBtn {
    margin-top: 0px;
    margin-left: calc(50% - 44px);
  }
  .Address .btnSpan {
    line-height: unset;
    width: 300px;
    display: block;
    height: 50px;
  }
}
</style>
